<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入歌手、歌名、专辑"
      @search="onSearch"
      @clear="clearSearch"
      @input="onInput"
    />

    <div id="search_box" v-if="searched">
      <div class="hot_search_box" v-if="!value">
        <p class="hot_p">热门搜索：</p>
        <ul>
          <li v-for="(el, idx) in hots" :key="idx" @click="send(el.first)">
            {{ el.first }}
          </li>
        </ul>
        <div v-for="(el, idx) in val_list" :key="idx" class="history">
          <img src="../../assets/history.png" class="history_img" />
          {{ el }}
          <img src="../../assets/del.png" class="del_img" @click="del(idx)" />
        </div>
      </div>
      <div class="searching" v-else>
        <p class="searching_p">搜索"{{ value }}"</p>
        <ul>
          <li
            v-for="(el, idx) in searching_list"
            :key="idx"
            @click="send(el.keyword)"
          >
            <van-icon name="search" />
            <div>{{ el.keyword }}</div>
          </li>
        </ul>
      </div>
    </div>

    <div id="show_box" v-else>
      <p class="best_p">最佳匹配：</p>
      <ul>
        <song
          v-for="(song, idx) in searchsongs"
          :key="song.id"
          :song_data="{
            song_name: song.name,
            song_artists: song.artists,
            song_album: song.album.name,
            song_exclusive: true,
            id: song.id,
          }"
          :id_list="id_lis"
          :idx="idx"
        ></song>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  get_hot_search,
  get_searchsong,
  get_searchWord,
} from "../../api/search";
import song from "../../components/song";
export default {
  created() {
    get_hot_search().then((res) => {
      // console.log(res.data.result.hots);
      this.hots = res.data.result.hots;
    });
  },
  data() {
    return {
      value: "",
      hots: [],
      val_list: [],
      searched: true,
      searchsongs: [],
      //正在搜索的提示词
      searching_list: [],
    };
  },
  computed: {
    id_lis() {
      return this.searchsongs.map((el) => el.id);
    },
  },
  watch: {
    value: {
      handler(val) {
        // this.searched = true;
        if (val) {
          get_searchWord(val).then((res) => {
            this.searching_list = res.data.result.allMatch;
          });
        }
      },
    },
  },
  components: {
    song,
  },
  methods: {
    //回车搜索按钮
    onSearch(val) {
      this.val_list.push(val);
      this.searched = false;
      get_searchsong(val).then((res) => {
        this.searchsongs = res.data.result.songs;
        console.log(this.searchsongs);
      });
    },
    onInput(val) {
      if (!val) {
        this.searched = true;
      }
    },
    //清除输入内容
    clearSearch() {
      this.value = "";
    },
    onCancel() {
      // Toast("取消");
      this.searched = true;
    },
    //热词点击事件
    send(el) {
      this.value = el;
      this.searched = false;
      get_searchsong(el).then((res) => {
        this.searchsongs = res.data.result.songs;
        console.log(this.searchsongs);
      });
    },
    del(idx) {
      this.val_list.splice(idx, 1);
    },
    //传递歌曲id
    sendId(song) {
      this.$store.state.songid = song.id;
      // console.log(this.$store.state.songid);
      this.$store.state.songimg = song.album.artist.img1v1Url;
      this.$store.state.songname = song.name;
      this.$store.state.singer = song.artists;
      console.log(song);
    },
  },
  filters: {
    songName(arr) {
      return arr
        .map((el) => {
          return el.name;
        })
        .join("/");
    },
  },
};
</script>

<style lang="scss" scoped>
#search_box {
  .hot_search_box {
    .hot_p {
      margin: 5px 0 5px 15px;
      text-align: left;
      font-size: 14px;
    }
    ul {
      padding: 5px;
      display: flex;
      flex-wrap: wrap;
      li {
        font-size: 12px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
        border-radius: 8px;
      }
    }
    .history {
      text-align: left;
      color: rgb(44, 39, 39);
      margin: 0px 15px;
      padding: 5px 0px;
      font-size: 14px;
      border-bottom: 1px solid rgba($color: #5e5c5c, $alpha: 0.1);
      .history_img {
        vertical-align: baseline;
        margin-right: 5px;
      }
      .del_img {
        float: right;
        vertical-align: baseline;
        margin-right: 5px;
      }
    }
  }
  .searching {
    .searching_p {
      margin: 5px 0 5px 15px;
      text-align: left;
      font-size: 14px;
      color: rgb(78, 78, 252);
    }
    ul {
      padding: 5px;
      li {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 5px;
        margin: 5px;
        i {
          font-size: 15px;
        }
      }
    }
  }
}

#show_box {
  .best_p {
    margin: 5px 0 5px 15px;
    text-align: left;
    font-size: 14px;
  }
  ul {
    width: 100%;
    overflow: hidden;
  }
}
</style>
